<template>
    <div class="container">
        <div class="luck">
            <LuckyWheel ref="myLucky" width="300px" height="300px" :prizes="prizes" :blocks="blocks" :buttons="buttons"
                @start="startCallback" @end="endCallback" />
        </div>
        <div class="dropdown">
            <dropdownVue ref="drop" @hotel-change="setPrizes"></dropdownVue>
        </div>
        <div>
            <t-fab class="fab-button" text="自定义店铺" @click="center = true"></t-fab>
            <t-popup v-model="center" placement="top">
                <div class="customHotel">
                    <customHotel @update="update"></customHotel>
                </div>
            </t-popup>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Toast } from 'tdesign-mobile-vue';
import dropdownVue from '../components/dropdown.vue';
import customHotel from '../components/customHotel.vue'

//转盘初始化
const myLucky = ref(null);
const blocks = reactive([{ padding: '13px', background: '#617df2' }]);
let prizes = ref([]);
const buttons = reactive([
    { radius: '50px', background: '#617df2' },
    { radius: '45px', background: '#afc8ff' },
    {
        radius: '40px', background: '#869cfa',
        pointer: true,
        fonts: [{ text: '开始\n干饭!', top: '-20px' }]
    },
])

//子组件ref
const drop = ref(null)
//弹出层
const center = ref(false);

//子组件更新prizes值
const setPrizes = (msg) => {
    prizes.value = msg
}

//子组件自定义店铺数据更新
function update() {
    console.log('自定义店铺修改');
    console.log(drop.value);
    drop.value.updateCustom()
}
//点击抽奖按钮
function startCallback(e) {
    // 调用抽奖组件的play方法开始游戏
    myLucky.value.play()
    // 模拟调用接口异步抽奖
    setTimeout(() => {
        // 调用stop停止旋转
        myLucky.value.stop()
    }, 2000)
}
//结束抽奖回调
function endCallback(prize) {
    Toast('就决定是你了！\n' + prize.fonts[0].text)
}
onMounted(() => {
})
</script>
<style scoped>
.container {
    width: 100%;
    height: auto;
}

.luck {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 20px;
    width: auto;
    height: auto;
}

.fab-button {
    position: fixed;
    bottom: 50px;
    right: 10px;
}

.customHotel{
    height: 50vh;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
</style>